<template>
	<view class="container">
		
		<!-- 顶部导航栏 -->
		<!-- <view class="header">
			<view class="header-left" :style="{ marginTop: safeTop + 'px' }" @click="goToBack">
				<image src="/static/base/back.svg" class="menu-icon" mode="aspectFit" />
			</view>
			<view class="header-title" :style="{ marginTop: safeTop + 'px' }">累计收益</view>
			<view class="header-right"></view>
		</view> -->
		

		<scroll-view scroll-y class="content" :style="{ paddingTop: headerHeight + 'px' }">
			<view  v-for="(year, index) in yearList" >
				
				<!-- 年份 -->
				<view class="month-selector" style="padding-right: 15rpx;">
					<text>{{year.year}}年</text>
					<text class="total-amount">{{year.profit}}元</text>
				</view>
				<view class="record-list" v-if="year.quarterly_list">
					<view v-for="(item, index) in year.quarterly_list" :key="index" class="record-item">
						<view class="record-info">
							<text class="user-name">{{ item.quarterly_name || '匿名用户' }}</text>
						</view>
						<view class="amount-info">
							<text class="total-amount">{{ item.profit }}元</text>
						</view>
					</view>
				</view>
			</view>

			<!-- 年份 -->
			<!-- <view class="month-selector">
				<text>2025</text>
				<image src="/static/base/more.svg" class="arrow-icon" />
			</view> -->
			<!-- 收益记录列表 -->
			<!-- <view class="record-list">
				<view v-for="(item, index) in incomeList" :key="index" class="record-item">
					<view class="avatar-container">
						<image :src="item.avatar || '/static/images/f.png'" class="avatar" mode="aspectFill" />
					</view>
					<view class="record-info">
						<text class="user-name">{{ item.nickname || '匿名用户' }}</text>
						<text class="date">{{ item.date }}</text>
					</view>
					<view class="amount-info">
						<text class="order-count">{{ item.order_count }}单</text>
						<text class="total-amount">{{ item.total_amount }}元</text>
						<text class="profit" :class="{ 'profit-up': item.profit > 0 }">
							{{ item.profit > 0 ? '+' : '' }}{{ item.profit }}元
						</text>
					</view>
				</view>
			</view> -->

			<!-- 总计 -->
			<view class="total-section">
				<text>累计收益：{{ totalIncome }}元</text>
			</view>

			<view style="height: 139rpx;"></view>
		</scroll-view>
	</view>
</template>

<script>
	import {
		getBaseUserInfo
	} from '@/api/base/user-center';

	import {
		getTeam_profit
	} from '@/api/base/index';
	export default {
		data() {
			return {
				year: '',
				userInfo: {
					uid: 0,
					nickname: '',
					identity: 0
				},
				yearList: [],
				incomeList: [
					{
						avatar: '/static/images/f.png',
						nickname: '会飞的鱼',
						date: '2025.10.01 14:22:33',
						order_count: 21,
						total_amount: '21.32',
						profit: 11.32
					},
					{
						avatar: '/static/images/f.png',
						nickname: '执着',
						date: '2025.10.02 09:15:47',
						order_count: 33,
						total_amount: '32.23',
						profit: 20.23
					}
				],
				totalIncome: '0.00'
			}
		},
		onLoad() {
			const { barTop } = this.$util.getWXStatusHeight()
			this.safeTop = barTop
			this.headerHeight = 45 + barTop
			
			this.getUserInfo();
		},
		onShow() {
			// 可在此处加载真实数据（如调用 /api/income/list）
			this.get_profit_List()
		},
		methods: {
			//收益列表
			get_profit_List: function(isPage) {
				let that = this;
				getTeam_profit(that.year).then(res => {
					that.totalIncome = res.data.totalProfit
					that.yearList = res.data.yearList
					console.log(that.yearList)
				}).catch(err => {
				});
			},
			getUserInfo() {
				getBaseUserInfo().then(res => {
					if (res.status === 200 && res.data) {
						this.userInfo = {
							...this.userInfo,
							...res.data
						};
					}
				}).catch(err => {
					console.log('获取用户信息失败', err);
				});
			},
			goToBack() {
				uni.navigateBack();
			},
		}
	}
</script>

<style scoped>
	.container {
		min-height: 100vh;
		background-color: #ffffff;
		padding-top: 20rpx;
	}
	
	.header {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		background-color: #fff;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 0 27.76rpx;
		z-index: 100;
		box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
		/* height: 88rpx; */
	}
	
	.header-left {
		width: 76.34rpx;
		height: 76.34rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	
	.menu-icon {
		width: 45rpx;
		height: 45rpx;
	}
	
	.header-title {
		font-size: 32rpx;
		font-weight: bold;
		color: #333;
	}
	
	.header-right {
		width: 76.34rpx;
		height: 76.34rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}


	.content {
		height: calc(100vh - 44px);
		padding: 0 30rpx;
	}

	.month-selector {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 20rpx 0;
		border-bottom: 1rpx solid #eee;
		font-size: 32rpx;
		color: #333;
	}

	.arrow-icon {
		width: 24rpx;
		height: 24rpx;
	}

	.record-list {
		margin-top: 30rpx;
	}

	.record-item {
		display: flex;
		align-items: center;
		padding: 28rpx 0;
		border-bottom: 1rpx solid #eee;
	}

	.avatar-container {
		width: 80rpx;
		height: 80rpx;
		margin-right: 20rpx;
	}

	.avatar {
		width: 100%;
		height: 100%;
		border-radius: 40rpx;
	}

	.record-info {
		flex: 1;
	}

	.user-name {
		font-size: 30rpx;
		color: #333;
		margin-bottom: 8rpx;
	}

	.date {
		font-size: 24rpx;
		color: #999;
	}

	.amount-info {
		text-align: right;
	}

	.order-count {
		font-size: 26rpx;
		color: #666;
		display: block;
		margin-bottom: 4rpx;
	}

	.total-amount {
		font-size: 30rpx;
		color: #333;
		font-weight: bold;
		display: block;
		margin-bottom: 4rpx;
	}

	.profit {
		font-size: 28rpx;
		color: #ff3366;
	}

	.profit-up {
		color: #00b300;
	}

	.total-section {
		margin-top: 60rpx;
		padding: 30rpx 0;
		text-align: center;
		font-size: 32rpx;
		font-weight: bold;
		color: #333;
		border-top: 2rpx solid #ddd;
	}
</style>